<template>
  <div>
      <mt-header title="管理收货地址" class="inmoder" fixed>
        <mt-button icon="back" slot="left" @click="$router.go(-1)"></mt-button>
      </mt-header>
      <div class="col"></div>
    <template >
     <div class="read">
        <div class="reads" v-for="(item, index) in readds" :key="index">
             <div class="con">
                 <div class="rname">
                     <span>{{item.receiver}}</span>
                     <span class="phone">{{item.cellphone}}</span>
                 </div>
                 <div class="rad">
                 <span>{{item.regres}}</span> 
                 <span>{{item.addres}}</span> 
                 </div>
             </div>
            
             <div class="bianji">
               <router-link :to="`/myreds?aid=${item.aid}`">
                 <img src="../assets/bianji.png" alt="">
               </router-link></div>
        </div>
     </div>
    </template>
    <div class="btn">
    <mt-button type="primary" size="large" class="butt" @click="getreadds">新增收货地址</mt-button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      readds: [],
    };
  },
  methods: {
    ht() {
      this.axios
        .get(`/user/address?uid=${this.$store.state.uid}`)
        .then((res) => {
          console.log(res);
          this.readds = res.data.data;
        });
    },
    getreadds(){
        this.$router.push('/myreadds')
    },
    tobianji(){
       this.$router.push('/myreds')
    }
  },
  mounted() {
    this.ht();
  },
};
</script>
<style lang="scss" scoped>
.col{
    margin-top: 41px;
    width: 100vw;
    height: 15px;
    background-color: #d9d9d9;
}
.read{
    width: 100vw;
    background-color: #fff;
    .reads{
        width: 90vw;
        margin: auto;
        position: relative;
        padding: 20px 0;
        border-bottom: 1px solid #d9d9d9;
        .con{ 
            width:80vw; 
           .rname{
             margin-bottom: 5px;
             span{
                 display: inline-block;
             }
             span.phone{
             margin-left: 20px;
              font-size: 12px;
             }
           }
           .rad{
             span{
               display:inline-block;
               font-size: 12px;
             }
             span+span{
                 margin-left: 5px;
             }
           }
        }
        .bianji{
            position: absolute;
            right: 0;
            top: 50%;
            img{
                width: 5vw;
            }
        }
    }
}
 .mint-header{
    background-color: #fff;
    color: #000;
    font-size: 16px;
    font-weight: bold;
 }
.btn{
    width: 100vw;
    position: fixed;
    bottom:0;
    padding: 30px 0;
    .butt{
        width: 90vw;
        margin: auto;
    }
}
</style>
